<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="选择课程"
      :visible.sync="addCurriculumShow"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      top="40px"
      class="add"
      @close="closeAdd"
    >
      <el-table
        :data="list"
        size="small"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <ElTableColumn label="所属院区" prop="yardName" />
        <ElTableColumn label="课程名称" prop="name" />
        <ElTableColumn label="宣教员" prop="lecturerName">
          <template slot-scope="scope">
            <div v-if="scope.row.lecturerName">
              <el-popover
                v-if="scope.row.lecturerName.length > 10"
                placement="top-start"
                trigger="hover"
                :content="scope.row.lecturerName "
              >
                <el-button slot="reference" size="mini" type="text">
                  <span>{{ scope.row.lecturerName.slice(0, 10)+ "..." }}</span>
                </el-button>
              </el-popover>
              <span v-else>{{ scope.row.lecturerName }}</span>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="课程周期" prop="create_time" width="220">
          <template slot-scope="{ row }">
            <span>{{ row.startTime }}</span>
            <span> -- {{ row.endTime }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn label="所属科室" prop="deptName">
          <template slot-scope="scope">
            <div v-if="scope.row.deptName">
              <el-popover
                v-if="scope.row.deptName.length > 10"
                placement="top-start"
                trigger="hover"
                :content="scope.row.deptName "
              >
                <el-button slot="reference" size="mini" type="text">
                  <span>{{ scope.row.deptName.slice(0, 10)+ "..." }}</span>
                </el-button>
              </el-popover>
              <span v-else>{{ scope.row.deptName }}</span>
            </div>
          </template>
        </ElTableColumn>
        <ElTableColumn label="状态" width="80">
          <template slot-scope="{ row }">
            <span v-if="row.status == 1">待开始</span>
            <span v-if="row.status == 2">进行中</span>
            <span v-if="row.status == 3">已完成</span>
            <span v-if="row.status == 4">已关闭</span>
          </template>
        </ElTableColumn>

      </el-table>
      <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="selectGoods">确 定</el-button>
        <el-button size="small" @click="closeAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from '@/components/Pagination';
// import { getActivityGoods } from '@/api/order';
import { drugcategoryList, getDrugList } from '@/api/drugs';
import { courseInviteList } from '@/api/curriculum';
class Search {
  drugCategoryCodes = [];
}
class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}
class Options {
  drugCategoryCode = [];
}
export default {
  name: 'AddGoods',
  components: {
    pagination
  },
  props: {
    goodsId: {
      type: Array,
      default() {
        return [];
      }
    },
    deptId: {
      type: String,
      default: ''
    },
    yardId: {
      type: String,
      default: ''
    },
    resource: {
      type: Number,
      default: 1
    },
    deptAttribute: {
      type: Number,
      default: 1
    },
    checkedList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      search: new Search(), // 检索条件
      page: new Page(), // 分页
      options: new Options(), // 选项
      list: [],
      addCurriculumShow: true,
      courseId: '',
      courseName: '',
      startTime: '',
      endTime: '',
      optionProps: {
        value: 'drugCategoryCode',
        label: 'drugCategoryName',
        children: 'children',
        multiple: true,
        checkStrictly: true,
        emitPath: false
      }
    };
  },

  mounted() {
    this.getOptions();
    this.getList();
    // console.log(this.resource);
  },
  activated() { },
  methods: {
    async getOptions() {
      const res = await drugcategoryList({});
      this.options.drugCategoryCode = res.data.list;
    },
    async getList() {
      let resource = 126;
      if (this.resource == 1) {
        resource = 126;
      } else if (this.resource == 2) {
        resource = 258;
      } else if (this.resource == 3) {
        resource = 259;
      } else {
        resource = 260;
      }
      try {
        const { data } = await courseInviteList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          statusList: [1, 2],
          inviteType: resource,
          signTypeId: this.deptAttribute == 1 ? 40 : 41,
          deptIds: this.deptAttribute == 1 ? this.deptId.split(',') : [],
          yardIds: this.deptAttribute != 1 ? this.yardId.split(',') : []
        });
        // console.log(data);
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    closeAdd() {
      this.$emit('closeAdd', false);
    },
    // 选中行
    handleCurrentChange(val) {
      this.courseId = val.id;
      this.courseName = val.name;
      this.startTime = val.startTime;
      this.endTime = val.endTime;
    },
    selectGoods() {
      if (!this.courseId) {
        this.$message({
          message: '请先选择课程',
          type: 'success'
        });
        return;
      }
      let courseMsg = {
        courseId: this.courseId,
        courseName: this.courseName,
        startTime: this.startTime,
        endTime: this.endTime
      };
      this.$emit('getCourseMsg', courseMsg);
      this.closeAdd();
    }
  }
};
</script>

<style lang="scss" scoped>
.add {
  ::v-deep.el-dialog {
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 10px 20px;
  }
}
::v-deep .el-table__body tr > td.el-table__cell {
  cursor: pointer;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
  background: #f7d0d0 !important;
  // color: #fff;
}
</style>
